<template>
  <div class="row">
    <div id="ToolCabinet" @mouseenter="handleEnter">
      <el-popover
        @show="handleShowPopover"
        @before-leave="handleHidePopover"
        placement="bottom-end"
        :width="650"
        trigger="hover"
        :show-arrow="false"
      >
        <template #reference>
          <el-button :icon="isDown ? ArrowUp : ArrowDown">工具箱</el-button>
          <!-- <el-icon><ArrowUp /></el-icon> -->
        </template>
        <div class="contaier">
          <div class="item" popper-class="item">
            <div class="title" popper-class="title">
              <img class="imgs" src="@/assets/images/zhaosjihua.png" alt="" />
              <div>招生计划</div>
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleOpenDraw(0)"
            >
              普通批计划
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleOpenDraw(1)"
            >
              提前批计划
            </div>
          </div>

          <div class="item" popper-class="item">
            <div class="title" popper-class="title">
              <img class="imgs" src="@/assets/images/fenshuxian.png" alt="" />
              <div>分数线</div>
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleOpenScoreLine(0)"
            >
              院校分数线
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleOpenScoreLine(1)"
            >
              专业分数线
            </div>
          </div>
          <div class="item" popper-class="item">
            <div class="title" popper-class="title">
              <img class="imgs" src="@/assets/images/xinxiku.png" alt="" />
              <div>信息库</div>
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleCollegeOpenDraw"
            >
              院校库
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleMajorLibrary"
            >
              专业库
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleJorLibrary"
            >
              职业库
            </div>
          </div>
          <!-- <div class="item" popper-class="item">
	          <div class="title" popper-class="title">榜单</div>
	          <div style="margin-bottom: 10px" popper-class="item-info">
	            大学排名
	          </div>
	          <div style="margin-bottom: 10px" popper-class="item-info">
	            学科评估
	          </div>
	        </div> -->
          <div class="item" popper-class="item">
            <div class="title" popper-class="title">
              <img class="imgs" src="@/assets/images/gengduo.png" alt="" />
              <div>更多</div>
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleOpenMore(0)"
            >
              批次线
            </div>
            <div
              style="margin-bottom: 10px"
              popper-class="item-info"
              @click="handleOpenMore(1)"
            >
              一分一段
            </div>
          </div>
        </div>
      </el-popover>
      <Drawertool ref="drawertoolRef" />
    </div>

    <div
      v-if="pathText.length > 0"
      class="row"
      style="font-size: 14.5px; width: 160px"
    >
      <div
        class="curr"
        style="margin: 5px 0 0 15px; color: #666"
        @click="router.back()"
      >
        专家填报 /&nbsp;
      </div>
      <div style="margin: 5px 0 0" v-if="pathText.length > 0">
        {{ pathText }}
      </div>
    </div>
  </div>
</template>

<script setup>
import Drawertool from '../Drawertool';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { ref } from 'vue';
import bus from '@/utils/bus.js';
import { useRouter } from 'vue-router';

// 路由信息
const router = useRouter();
const drawertoolRef = ref(null);
const isDown = ref(false);
const pathText = ref('');

bus.on('handlePathTextChange', (data) => {
  pathText.value = data;
});

const handleOpenDraw = (tag) => {
  drawertoolRef.value.handleChangeDrawer(true, 1, null, tag);
};
const handleOpenScoreLine = (tag) => {
  drawertoolRef.value.handleChangeDrawer(true, 2, null, tag);
};
const handleOpenMore = (tag) => {
  drawertoolRef.value.handleChangeDrawer(true, 5, null, tag);
};
const handleCollegeOpenDraw = (tag) => {
  drawertoolRef.value.handleChangeDrawer(true, '3-1', null, tag);
};
const handleMajorLibrary = (tag, tabsType = '3-2') => {
  drawertoolRef.value.handleChangeDrawer(true, '3-1', null, tag, tabsType);
};
const handleJorLibrary = (tag, tabsType = '3-3') => {
  drawertoolRef.value.handleChangeDrawer(true, '3-1', null, tag, tabsType);
};
const handleShowPopover = () => {
  isDown.value = true;
};

const handleEnter = () => {
  isDown.value = true;
};
const handleHidePopover = () => {
  isDown.value = false;
};
</script>

<style lang="scss" scoped>
.imgs {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
</style>
<style lang="scss">
.contaier {
  display: flex;

  .item {
    padding: 0 30px;
    border-right: 1px solid #ccc;

    .title {
      margin: 10px 0;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
  }

  .item:nth-child(5) {
    border-right: none;
  }
}

.item-info {
  color: red !important;
  cursor: pointer !important;
}

div[popper-class='item-info']:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
